<template>
	<view class="content mainpadding">
		<u-navbar title="選擇商品" safeAreaInsetTop placeholder fixed autoBack>
			<view class="u-nav-slot" slot="right">
				<!-- <text class="color_san text_a" @click="goRechargeRecord">充值記錄</text> -->
				<!-- <image class="scanImg" src="/static/images/index/scan.png" mode=""></image> -->
			</view>
		</u-navbar>
		<view >
			<u--input prefixIcon="search" shape="circle" prefixIconStyle="font-size: 22px;color: #909399"
				placeholder="請輸入搜索内容" v-model="name" @confirm="getGoodsList()"></u--input>
		</view>
		<!-- 篩選 -->
		<view class="flexbetween margin_top">
			<view class="flexleft">
				<view :class="current==3?'color_ling text_a':'color_six text_a'" @click="screenGoods()">分類篩選</view>
				<view class="screen" style="margin-left: 5rpx;"></view>
			</view>
			<view :class="current==0?'color_ling text_a':'color_six text_a'" @click="selectCom()">
				綜合排序
			</view>
			<view class="flexleft">
				<view :class="current==1?'color_ling text_a':'color_six text_a'" @click="selectSale()">銷量排序</view>
				<view>
					<view :class="type==2?'arrow_top_active':'arrow_top'"></view>
					<view :class="type==1?'arrow_bottom_active':'arrow_bottom'"></view>
				</view>
			</view>
			<view class="flexleft">
				<view :class="current==2?'color_ling text_a':'color_six text_a'" @click="selectPrice()">價格排序
				</view>
				<view>
					<view :class="type==4?'arrow_top_active':'arrow_top'"></view>
					<view :class="type==3?'arrow_bottom_active':'arrow_bottom'"></view>
				</view>
			</view>
		</view>
		<!-- 分類篩選 -->
		<view class="margin_top">
			<scroll-view class="white_nowrap" scroll-x>
				<view class="flexleft">
					<view class="margin_right2" v-for="(item,index) in shop_class">
						<view :class="item.isChecked?'cateSelect':'cateNoSelect'" @click="selectCate(item)">
							{{item.name}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 商品 -->
		<view class="mainpadding border2 ffffff margin_top flexleft positionr" v-for="item in list.data" :key="item.id" @click="goGoodsInfo(item.id)">
			<view class="goodsImg margin_right3">
				<image :src="item.logoimage_text" mode=""></image>
			</view>
			<!-- <view class="number">{{item.id}}</view> -->
			<view class="flex1 justify_between_column" style="height: 157rpx;">
				<view class="text_a color_san">{{item.name}}</view>
				<view class="flexleft">
					<view class="freeBox margin_right2">免運</view>
					<view class="text_f color_six margin_right2">月售{{item.count}}</view>
					<view class="text_f color_six" v-if="!item.end_num">庫存不限</view>
					<view class="text_f color_six" v-else>庫存{{item.end_num}}</view>
				</view>
				<view class="price">${{item.new_price}}</view>
			</view>
		</view>
		<view class="posibottom mainpadding">
			<view class="flexbetween">
				<view class="leftAllprice flexleft mainpadding ffffff">
					<view class="cart margin_right3">
						<view class="num" v-text="secondList.length"></view>
					</view>
					<view class="line_r margin_right2"></view>
					<view class="hei_text main_size">合計：</view>
					<view class="color_red main_size" v-text="'$'+allprice"></view>
				</view>
				<view class="rightsubmit flexcenter mainpadding" @click="chakan">
					<view class="hei_text main_size">結帳</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				type: 1,
				shop_id:"",
				shopclassify_id: "", //分類id
				page: 1,
				limit:12,
				list:{
					data:[]
				},
				shop_class:[],
				name:"",
				secondList:[],
				allprice:0
			}
		},
		onLoad(options) {
			this.shop_id = options.id
			this.getGoodsList()
			this.getShopclass()
		},
		onShow() {
			uni.$off("screenId")
			uni.$on("screenId", data => {
				console.log(data, "選擇的分類id");
				this.shopclassify_id = data
				this.getGoodsList()
			})
			this.getorderinfo()
		},
		methods: {
			chakan(){
				uni.navigateTo({
					url: `/pages_order/selectGoods?id=${this.shop_id}`
				})
			},
			async getorderinfo() { //選擇商品
				let _this = this
				let res = await this.http.request('/api/ordergoods/shopOrderCartIndex', 'GET', {
					shop_id: this.shop_id,
					order_goods_id:uni.getStorageSync("reservation_order_id")
				})
				if (res.code == 1) {
					let price = 0
					res.data.forEach(item => {
						price = Number(price) + Number(item.price)
					})
					this.allprice = price
					this.secondList = res.data
				}
			},
			getShopclass(){
				this.http.request('/api/shop/shopCategory', 'GET', {
					shop_id: this.shop_id
				}).then(res => {
					if (res.data.length) {
						res.data.forEach(item => {
							this.$set(item, "isChecked", false)
						})
						res.data.unshift({
							id: "",
							name: "全部",
							isChecked: true
						})
					} else {
						res.data = [{
							id: "",
							name: "全部",
							isChecked: true
						}]
					}
					this.shop_class = res.data
				})
			},
			async getGoodsList(isPage, page) { //商品列表
				let _this = this
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				let shopclassify_id = this.shopclassify_id==""?[]:this.shopclassify_id.split(",")
				let category_id = shopclassify_id.length==0?"":shopclassify_id[shopclassify_id.length - 1] == "" ? shopclassify_id[
						shopclassify_id.length - 2] : shopclassify_id[shopclassify_id.length - 1]
				let res = await this.http.request('/api/shop/listGoods', 'POST', {
					page: page || 1,
					limit: _this.limit,
					name:this.name,
					shop_id: this.shop_id,
					shopclassify_id: category_id,
					type: this.type, //排序類型默認0，1=銷量降，2-=銷量升，3=價格降 4=價格升
				})
				uni.hideLoading()
				if (res.code == 1) {
					let resList = res.data;
					let dataList = _this.list;
					if (isPage == true) {
						_this.list.data = dataList.data.concat(resList.data);
					} else {
						this.list = res.data
						_this.list.data = resList.data;
					}
				}
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getGoodsList(true, page);
			},
			selectCate(value) { //商品選擇分类
				this.shop_class.forEach(item => {
					item.isChecked = false
				})
				value.isChecked = true
				this.shopclassify_id = value.id+","
				this.getGoodsList()
			},
			screenGoods() { //商品分類篩選
				this.current = 3
				this.type = 0
				uni.navigateTo({
					url: "/pages_index/classifyScreen?id=" + this.shop_id
				})
			},
			selectCom() { //商品綜合排序
				this.current = 0
				this.type = 0
				this.getGoodsList()
			},
			selectSale() { //商品銷量排序
				this.current = 1
				this.type = this.type == 1 ? 2 : 1
				this.getGoodsList()
			},
			selectPrice() { //商品價格排序
				this.current = 2
				this.type = this.type == 3 ? 4 : 3
				this.getGoodsList()
			},
			goGoodsInfo(id){ //商品詳情
				uni.navigateTo({
					url:"./goodsInfo?id="+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.num {
		width: 35rpx;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		background: #FF5C00;
		border-radius: 50%;
		position: absolute;
		right: -20rpx;
		top: -20rpx;
		font-size: 17rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.cart {
		width: 40.5rpx;
		height: 42.58rpx;
		background-image: url("@/static/images/index/cart_num.png");
		background-size: 100% 100%;
		position: relative;
	}
	.leftAllprice {
		border-radius: 50rpx 0 0 50rpx;
		flex: 6;
	}
	
	.rightsubmit {
		background-color: #ffb800;
		border-radius: 0 50rpx 50rpx 0;
		flex: 1;
	}
	// 分類篩選
	.cateNoSelect {
		padding: 5rpx 20rpx;
		line-height: 53rpx;
		line-height: 53rpx;
		text-align: center;
		background: #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	
	.cateSelect {
		padding: 5rpx 20rpx;
		line-height: 53rpx;
		text-align: center;
		background: rgba(255, 92, 0, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #FF5C00;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}
	
	.content {
		padding-bottom: 180rpx;
	}

	::v-deep.u-navbar__content__title {
		font-weight: 800;
	}

	.scanImg {
		width: 42rpx;
		height: 42rpx;
		margin-top: 10rpx;
	}

	.goodsImg {
		width: 157rpx;
		height: 157rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}

	}

	.number {
		padding: 5rpx 30rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 0rpx 14rpx 0rpx 14rpx;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
	}

	.freeBox {
		width: 75rpx;
		height: 41rpx;
		line-height: 41rpx;
		text-align: center;
		background: rgba(255, 133, 5, .1);
		border-radius: 3rpx 3rpx 3rpx 3rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
	}

	.price {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}
</style>